<template>
	<view class="content-box">
		<view class="card">
			<view class="form-item">
				<view class="lable">
					头像
				</view>
				<view class="value">
					<image style="border-radius: 6rpx;overflow: hidden;"
						:src="$imageUrl(userInfo.avatar)||'/static/upHead.png'" mode="" @click="setImg('avatar')">
					</image>
				</view>
			</view>
			<view class="form-item">
				<view class="lable">
					姓名
				</view>
				<view class="value" @click="popupShow=true">
					{{userInfo.nickName}}
				</view>
			</view>

			<view class="form-item">
				<view class="lable">
					手机号
				</view>
				<view class="value" @click="$routeTo('/pages/me/userInformation/setPhone/setPhone?phone='+userInfo.phone)">
					{{userInfo.phone}}
				</view>
			</view>

			<view class="form-item">
				<view class="lable">
					接单位置
				</view>
				<view class="value" @click="setPlace">
					{{userInfo.address||'选择地区'}}
				</view>
			</view>

			<view class="form-item">
				<view class="lable">
					驾龄
				</view>
				<view class="value" @click="pickerShow=true">
					{{userInfo.drivingYears}} 年
				</view>
			</view>
			<view class="form-item">
				<view class="lable">
					是否抽烟
				</view>
				<view class="value">
					<myRadio :list="list" name='isSmoking' :value="userInfo.isSmoking" @change="myRadioChange">
					</myRadio>
				</view>
			</view>
			
			<view class="form-item">
				<view class="lable">
					携宠入驻宠物友好酒店经历数
				</view>
				<view class="value">
					<u-number-box v-model="userInfo.hotelNum" :min="0" buttonSize="46rpx" @change="valChange"></u-number-box>
				</view>
			</view>
		</view>

		<view class="card" style="margin-top: 20rpx;padding: 20rpx 40rpx;">
			<view class="" style="padding-bottom: 20rpx;" v-if="check==3">
				<u-alert title="失败原因" type = "error" :description = "userInfo.refuseReason"></u-alert>
			</view>
			
			<view class="title">
				<view class="">
					个性签名
				</view>
				<view class="btn" :style="{color:check==1?'#f1a532':check==3?'#ff0000':''}" v-if="userInfo.signature"
					@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=signature')">
					{{check==1?'审核中':check==3?'审核失败':'编辑'}}
				</view>
			</view>
			<view class="content-text">
				<text>
					{{userInfo.signature||''}}
				</text>
			</view>
			<view v-if="!userInfo.signature" class="write-btn"
				@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=signature')">
				去填写
			</view>
			
			
			<view class="title">
				<view class="">
					养宠经验
				</view>
				<view class="btn" :style="{color:check==1?'#f1a532':check==3?'#ff0000':''}" v-if="userInfo.petRearingExperience"
					@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=rearingExperience')">
					{{check==1?'审核中':check==3?'审核失败':'编辑'}}
				</view>
			</view>
			<view class="content-text">
				<text>
					{{userInfo.petRearingExperience||''}}
				</text>
			</view>
			<view class="image-box">
				<image v-for="item in userInfo.petRearingExperienceImages" :src="$imageUrl(item)" mode=""></image>
			</view>
			<view v-if="!userInfo.petRearingExperience" class="write-btn"
				@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=rearingExperience')">
				去填写
			</view>
			<view class="title">
				<view class="">
					宠物故事
				</view>
				<view class="btn" :style="{color:check==1?'#f1a532':check==3?'#ff0000':''}" v-if="userInfo.petStory"
					@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=story')">
					{{check==1?'审核中':check==3?'审核失败':'编辑'}}
				</view>
			</view>
			<view class="content-text">
				<text>
					{{userInfo.petStory||''}}
				</text>
			</view>
			<view class="image-box">
				<image v-for="item in userInfo.petStoryImages" :src="$imageUrl(item)" mode=""></image>
			</view>
			<view v-if="!userInfo.petStory" class="write-btn"
				@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=story')">
				去填写
			</view>
			<view class="title">
				<view class="">
					推荐宠物友好酒店
				</view>
				<view class="btn" :style="{color:check==1?'#f1a532':check==3?'#ff0000':''}" v-if="userInfo.petHotel"
					@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=hotel')">
					{{check==1?'审核中':check==3?'审核失败':'编辑'}}
				</view>
			</view>
			<view class="content-text">
				<text>
					{{userInfo.petHotel||''}}
				</text>
			</view>
			<view class="image-box">
				<image v-for="item in userInfo.petHotelImages" :src="$imageUrl(item)" mode=""></image>
			</view>
			<view v-if="!userInfo.petHotel" class="write-btn"
				@click="$routeTo('/pages/me/userInformation/addWrite/addWrite?type=hotel')">
				去填写
			</view>
		</view>
		<u-picker :show="pickerShow" :columns="columns" closeOnClickOverlay immediateChange @close="closePicker"
			@confirm="confirmPicker"></u-picker>
		<u-popup :show="popupShow" @close="popupClose" mode="bottom" round="20rpx">
			<view class="popup-box">
				<view class="popup-title">
					修改姓名
				</view>
				<view class="popup-input">
					<input type="text" v-model="userInfo.nickName">
				</view>
				<view class="popup-btn" @click="submitPopup">
					确认修改
				</view>
			</view>
		</u-popup>
		
		<l-clipper v-if="clipperShow" :image-url="upImageUrl" @success="clipperSuccess" @cancel="clipperShow = false"  />

		<Loading />
	</view>
</template>

<script>
	import myRadio from '@/components/myRadio.vue'
	let upImgName=''
	export default {
		components: {
			myRadio
		},
		data() {
			return {
				list: [{
						name: '是',
						value: 1
					},
					{
						name: '否',
						value: 0
					}
				],
				pickerShow: false,
				popupShow: false,
				columns: [],
				userInfo: {
					avatar: '',
					nickName: '',
					isSmoking: '',
					drivingYears: '',
					userInfo: '',
					address: '',
					hotelNum:0
				},
				check:'',
				clipperShow:false,
				upImageUrl:''
			}
		},
		onShow() {
			this.upData()
		},
		onLoad() {
			let columns = []
			for (let i = 1; i <= 40; i++) {
				columns.push({
					text: i + '年',
					value: i
				})
			}
			this.columns[0] = columns
		},
		methods: {
			upData() {
				this.$myRequest('/api/driver/mine/v1/driver/details').then(res => {
					if (res.data.petRearingExperienceImages) res.data.petRearingExperienceImages = res.data
						.petRearingExperienceImages.split(',')
					if (res.data.petStoryImages) res.data.petStoryImages = res.data.petStoryImages.split(',')
					if (res.data.petHotelImages) res.data.petHotelImages = res.data.petHotelImages.split(',')
					this.userInfo = {
						...this.userInfo,
						...res.data
					}
					this.check=res.data.check
				})
			},
			setImg(name) {
				let that = this
				upImgName=name
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: ['image'],
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						console.log(that);
						that.upImageUrl=res.tempFiles[0].tempFilePath
						that.clipperShow=true
						
					}
				});
			},
			clipperSuccess(e){
				this.clipperShow=false
				this.$uploadFiles({
					filePath: e.url,
					formData: {
						type: 1
					}
				}).then(res => {
					this.userInfo[upImgName] = res.data
					this.submit({
						[upImgName]:  res.data
					})
					console.log(res.data)
				})
				console.log(e)
			},
			myRadioChange(name, value) {
				console.log(name, value)
				this.submit({
					isSmoking: value
				})
			},
			closePicker() {
				this.pickerShow = false
			},
			confirmPicker(e) {
				console.log(e.value[0].value)
				this.submit({
					drivingYears: e.value[0].value
				})
				this.close()
			},
			popupClose() {
				this.popupShow = false
			},
			submitPopup() {
				this.popupClose()
				this.submit({
					nickName: this.userInfo.nickName
				})
			},
			valChange(e){
				this.submit({
					hotelNum: e.value
				})
			},
			setPlace() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res)

						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: 'a1b1763664b900d6f3a61dd992973dbf',
								location: `${res.longitude},${res.latitude}`
							},
							success(ress) {
								let data = {
									addressLng: res.longitude,
									addressLat: res.latitude,
									address: res.name,
									areaCode: ress.data.regeocode.addressComponent.adcode
								}
								that.submit(data)

							}
						})

					},
					fail: function(err) {
						wx.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									wx.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												wx.openSetting({
													success: function(data) {
														if (data.authSetting[
																"scope.userLocation"
															] === true) {
															wx.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//回调 重新打开地图
															that.setPlace()
														}
													}
												})
											} else {
												wx.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												})
											}
										}
									})

								}
							}
						})

					}
				});
			},
			submit(data) {
				this.$myRequest('/api/driver/mine/v1/update/driverInfo', data, 'POST').then(res=>{
					this.upData()
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup-box {
		padding: 20rpx 30rpx;

		.popup-title {
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
		}

		.popup-input {
			margin: 20rpx 40rpx;
			border-bottom: 2rpx solid #E2E2E2;
			padding: 20rpx 0;
		}

		.popup-btn {
			width: 338rpx;
			height: 80rpx;
			background: $theme-color;
			border-radius: 40rpx;
			font-size: 28rpx;
			text-align: center;
			margin: 40rpx auto 20rpx auto;
			line-height: 80rpx;
			color: #FFFFFF;
			margin-top: 120rpx;
		}
	}

	.content-box {
		padding: 20rpx 0;
		background-color: #F5F5F5;

		.card {
			background-color: #ffffff;
			padding: 0 40rpx;

			.title {
				font-size: 28rpx;
				color: #333333;
				font-weight: 700;
				position: relative;
				padding-left: 20rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					color: #999999;
					font-weight: 100;
				}

				&:before {
					content: '';
					width: 12rpx;
					height: 12rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					background: $theme-color;
					border-radius: 50%;
				}
			}

			.content-text {
				font-size: 28rpx;
				padding: 20rpx;
				color: #666666;
			}

			.write-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				margin: 0 auto;
				background-color: $theme-color;
				color: #ffffff;
				text-align: center;
			}

			.form-item {
				display: flex;
				border-bottom: 2rpx solid #f5f5f5;
				padding: 40rpx 0;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;

				.lable {
					color: #999999;
				}

				.value {
					color: #333333;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}

		}

		.image-box {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;

			image {
				width: 238rpx;
				height: 238rpx;
				margin-right: 26rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>